<template>
  <div class="School_iContainer">
    <div class="search">
      <Search @input="searchMajor"></Search>
    </div>
    <div class="shuaixuan">
      <router-link to="/filter">
        <div class="citySel">
          <div v-if="checkCities">
            <span v-for="(item, index) in checkCities" :key="index"
              >{{ item }}、</span
            >
          </div>
          <span v-else>院校城市</span>
          <Icon type="icon-shouye"></Icon>
        </div>
      </router-link>
      <router-link to="/type">
        <div class="schoolTypeSel">
          <div v-if="checkTypes">
            <span v-for="(item, index) in checkTypes" :key="index"
              >{{ item }}、</span
            >
          </div>
          <span v-else>院校类型</span><Icon type="icon-shouye"></Icon>
        </div>
      </router-link>
    </div>
    <div class="SchoolListContainer">
      <!-- <div class="listItem">
        <SchoolListItem  :school="school"></SchoolListItem>
      </div> -->
      <template v-for="(item, index) in school">
        <router-link :to="'/college/' + item.collegeName" :key="index">
          <div>
            <SchoolListItem :school="item"></SchoolListItem>
          </div>
        </router-link>
      </template>

      <!-- <div class="listItem">
        <SchoolListItem></SchoolListItem>
      </div> -->
    </div>
    <div class="searchBox" v-show="searchShow">
      <router-link to="/usermsg">
        <div>
          <SchoolListItem></SchoolListItem>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { getCollageList } from "@/api/allApi";
import Search from "@/components/Search.vue";
import Icon from "@/components/Icon.vue";
import SchoolListItem from "@/components/SchoolListItem.vue";
export default {
  components: {
    Search,
    Icon,
    SchoolListItem,
  },
  data() {
    return {
      query: {},
      school: null,
      // majorData: [
      //   "清华大学",
      //   "北京大学",
      //   "中国计量大学",
      //   "南京审计大学",
      //   "武汉大学",
      //   "上海大学",
      //   "厦门大学",
      //   "南京大学",
      //   "兰州大学",
      //   "东北大学",
      //   "哈尔滨工业大学",
      //   "海南大学",
      //   "东北师范大学",
      //   "北京师范大学",
      //   "华东师范大学",
      //   "陕西师范大学",
      //   "重庆大学",
      //   "四川大学",
      //   "浙江大学",
      //   "大连理工大学",
      // ],
      checkCities: [],
      checkTypes: [],
      searchShow: false,
    };
  },
  async mounted() {
    this.setHeight();
    // Toast.success('成功文案');
    // let data = await getCollageList();
    // console.log(data);
    this.getCheckCities();
    let res = await getCollageList(this.query);
    console.log(res.data.records);
    this.school = res.data.records;
  },
  methods: {
    setHeight() {
      let cliH = document.documentElement.clientHeight;
      let conH = document.querySelector(".SchoolListContainer");
      // console.log(conH);
      conH.style.height = cliH - 225 + "px";
      // console.log(cliH - 220 + "px");
    },
    searchMajor(keyWord) {
      // 发送请求拿数据（将keyWord传值传过去）
      if (!keyWord) {
        this.searchShow = false;
      } else {
        this.searchShow = true;
      }
    },
    getCheckCities() {
      this.checkCities = JSON.parse(sessionStorage.getItem("checkCities"));
      console.log(this.checkCities);
      this.checkTypes = JSON.parse(sessionStorage.getItem("checkTypes"));
      console.log(this.checkTypes);
    },
  },
};
</script>

<style lang="less" scoped>
.School_iContainer {
  background: linear-gradient(140deg, #bde2f8, #e5f4fd, #ffffff);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  .search {
    width: 100%;
  }
  .shuaixuan {
    width: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 55px;
    .citySel,
    .schoolTypeSel {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 165px;
      height: 40px;
      line-height: 40px;
      border-radius: 10px;
      background-color: #f1f1f1;
      div {
        width: 120px;
        height: 35px;
        line-height: 35px;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出部分 */
        text-overflow: ellipsis; /* 在溢出部分显示省略号 */
        span {
          display: inline-block;
          width: 45px;
          height: 35px;
          line-height: 35px;
          margin: 0 5px;
        }
      }
    }
  }
  .SchoolListContainer {
    width: 90%;
    overflow: auto;
    .listItem {
      height: 90px;
    }
  }
}

.searchBox {
  width: 90%;
  height: 490px;
  background-color: white;
  position: absolute;
  top: 67px;
  left: 18px;
  overflow: auto;
  div {
    width: 100%;
    height: 90px;
    cursor: pointer;
  }
}
.searchBox::-webkit-scrollbar {
  display: none;
}
</style>